var MapStatus = function(map, container){
  this.map = map;
  this.container = typeof container == 'string' ? document.getElementById(container) : container;
  this.projection = map.getProjection();
  this.buildGuts();
  this.initHandler();
  google.maps.event.trigger(map, 'center_changed');
}
MapStatus.prototype.buildGuts = function(){
  var itemRule = 'width:50%;color:#606060;float:left;';
  var headRule = 'font-weight:bolder;padding-left:5px;';
  var unitRule = 'padding-left:10px;';
  var html = '<div style="' + itemRule + '">' +
  '<div style="' + headRule + '">鼠标位置</div>' +
  '<div style="' + unitRule + '"><span>地理坐标：</span><span id="geoStatus"></span></div>' +
  '<div style="' + unitRule + '"><span>像素坐标：</span><span id="pixelStatus"></span></div>' +
  '<div style="' + unitRule + '"><span>图块坐标：</span><span id="tileStatus"></span></div>' +
  '<div style="' + unitRule + '"><span>上次点击：</span><span id="clickStatus"></span></div>' +
  '</div>' +
  '<div style="' + itemRule + '">' +
  '<div style="' + headRule + '">地图状态</div>' +
  '<div style="' + unitRule + '"><span>缩放层次：</span><span id="zoomStatus"></span></div>' +
  '<div style="' + unitRule + '"><span>中心点&nbsp;&nbsp;：</span><span id="centerStatus"></span></div>' +
  '<div style="' + unitRule + '"><span>东北角&nbsp;&nbsp;：</span><span id="neStatus"></span></div>' +
  '<div style="' + unitRule + '"><span>西南角&nbsp;&nbsp;：</span><span id="swStatus"></span></div>' +
  '</div>';
  this.container.innerHTML = html;
}
MapStatus.prototype.initHandler = function(){
  this.status = {
    zoomS: document.getElementById("zoomStatus"),
    centerS: document.getElementById("centerStatus"),
    swS: document.getElementById("swStatus"),
    neS: document.getElementById("neStatus"),
    clickS: document.getElementById("clickStatus"),
    geoS: document.getElementById("geoStatus"),
    tileS: document.getElementById("tileStatus"),
    pixelS: document.getElementById("pixelStatus")
  };
  this.addStatusListener(this.map);
}
MapStatus.prototype.addStatusListener = function(map){
  google.maps.event.addListener(map, 'center_changed', MapStatus.prototype.onMapChange.call(this));
  google.maps.event.addListener(map, 'bounds_changed', MapStatus.prototype.onMapChange.call(this));
  google.maps.event.addListener(map, 'zoom_changed', MapStatus.prototype.onMapChange.call(this));
  google.maps.event.addListener(map, 'click', MapStatus.prototype.onMapClick.call(this));
  google.maps.event.addListener(map, 'mousemove', MapStatus.prototype.onMouseOver.call(this));
}

MapStatus.prototype.onMapChange = function(event){
  var map = this.map;
  var status = this.status;
  return function(event){
    var center = map.getCenter();
    var zoom = map.getZoom();
    status.zoomS.innerHTML = '&nbsp;' + zoom;
    status.centerS.innerHTML = center.lat().toFixed(4) + ',&nbsp;' + center.lng().toFixed(4);
    var bounds = map.getBounds();
    if (bounds) {
      var sw = bounds.getSouthWest();
      var ne = bounds.getNorthEast();
      status.swS.innerHTML = sw.lat().toFixed(4) + ',&nbsp;' + sw.lng().toFixed(4);
      status.neS.innerHTML = ne.lat().toFixed(4) + ',&nbsp;' + ne.lng().toFixed(4);
    }
  }
}
MapStatus.prototype.onMapClick = function(){
  var status = this.status;
  return function(event){
    var latlng = event.latLng;
    status.clickS.innerHTML = latlng.lat().toFixed(4) + ',&nbsp;' + latlng.lng().toFixed(4);
  }
}
MapStatus.prototype.onMouseOver = function(){
  var status = this.status;
  var map = this.map;
  var projection = this.projection;
  return function(event){
    var latlng = event.latLng;
    status.geoS.innerHTML = latlng.lat().toFixed(4) + ',&nbsp;' + latlng.lng().toFixed(4);
    if (projection) {
      var pointPx = projection.fromLatLngToPoint(latlng);
      status.pixelS.innerHTML = pointPx.x.toFixed(4) + ',&nbsp;' + pointPx.y.toFixed(4);
      status.tileS.innerHTML = Math.floor(pointPx.x / 256) + ',&nbsp;' + Math.floor(pointPx.y / 256);
    }
  }
}
